<html>
<head>
<style>
#overlay_map{width:128px; height:128px; 
  border: solid 3px gray; 
  border-width: 3px 0 1px 3px;
}
</style>

<link rel="stylesheet" type="text/css" href="<?php echo base_url()?>css/styles.css" media="screen" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	var map;
function initialize() {
	/*
	var latlng = new google.maps.LatLng(-7.8,110.3666667);
    var myOptions = {
      zoom: 11,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };*/
    var map = new google.maps.Map(document.getElementById("map_canvas"));
	var overlayMap = new google.maps.Map(
		document.getElementById('overlay_map'), {
		mapTypeId: google.maps.MapTypeId.ROADMAP, 
		disableDefaultUI: true
	});

	google.maps.event.addListener(map, 'zoom_changed', function() {
		var newZoom = Math.max(map.getZoom() - 4, 0);
		//var newZoom = map.getZoom() + 4;
		if (overlayMap.getZoom() != newZoom) overlayMap.setZoom(newZoom);
	});
	
	google.maps.event.addListener(overlayMap, 'zoom_changed', function() {
		var newZoom = overlayMap.getZoom() + 4;
		//var newZoom = Math.max(overlayMap.getZoom() - 4,0);
		if (map.getZoom() != newZoom) map.setZoom(newZoom);
	});

	overlayMap.bindTo('center', map, 'center');
		
	var overDiv = overlayMap.getDiv();
	map.getDiv().appendChild(overDiv);
	overDiv.style.position = "absolute";
	overDiv.style.right = "0px";
	overDiv.style.bottom = "14px";
	overDiv.style.zIndex = 10;

	google.maps.event.addListener(overlayMap, 'idle', function() {
		overlayMap.getDiv().style.zIndex = 10;
	});
	map.setZoom(8); // This will trigger a zoom_changed on the map
	map.setCenter(new google.maps.LatLng(-7.8,110.3666667));
	map.setMapTypeId(google.maps.MapTypeId.ROADMAP);

	
	<?php foreach($map as $row): ?>
	var image<?php echo $row->id_place?> = new google.maps.MarkerImage("http://localhost/ta/img/myfav.png");
	/*var image<?php// echo $row->id_post?> = new google.maps.MarkerImage("http://localhost/ta/img/foto_place/<?php// echo $row->foto_place?>",
		   null, null, null, new google.maps.Size(30, 30)
	);*/
	var marker<?php echo $row->id_place?> = new google.maps.Marker({
		position: new google.maps.LatLng(<?php echo $row->latitude?>,<?php echo $row->longitude?>), 
		map: map,
		icon : image<?php echo $row->id_place?>,
		title:"<?php echo $row->name?>"
	});
	var contentString<?php echo $row->id_place?> = '<div class="mapfoto"><?php echo img(array('src'=>'http://localhost/ta/img/thumb_place/'.$row->foto_place,'width'=>50,'height'=>50));?></div>'+										
													'<div class="constring"><?php echo anchor('place/view/'.$row->id_place,$row->name);?></div>'
												;
		
	var infowindow<?php echo $row->id_place?> = new google.maps.InfoWindow({
		content: contentString<?php echo $row->id_place?>,
		maxWidth :300,
		maxHeight :400
	});
	
	google.maps.event.addListener(marker<?php echo $row->id_place?>, 'click', function() {
		infowindow<?php echo $row->id_place?>.open(map,marker<?php echo $row->id_place?>);
	});
	
	google.maps.event.addListener(map, "click", function(){
		infowindow<?php echo $row->id_place?>.close();
	});
	
	<?php endforeach;?>

}
</script>
</head>
<body onload="initialize()">
	<div id="map_canvas">
	</div>
	<div id="overlay_map"></div>

</body>
</html>